<template>
  <!--  地图容器 -->
  <div id="map" style="height: 100vh; width: 100%">

  </div>
  <div class="calculation-box">
    <p>点击地图规选</p>
    <div id="calculate-area">
      {{state.drawArea}}平方公里
    </div>
  </div>


</template>
<script setup>
import mapboxgl  from "mapbox-gl";
import MapboxDraw from '@mapbox/mapbox-gl-draw'
import MapboxLanguage from '@mapbox/mapbox-gl-language'; //可以将标签改为中文
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
import {onMounted, reactive} from "vue";

//引入turf.js
import * as turf from '@turf/turf'
let map;
let draw;
/*
* 更改地图的样式配置属性
* 当用户单击配置属性，使用【setConfigProperty】关键字basemap来设置地图要素
* dawn -> day -> dusk -> night
* https://docs.mapbox.com/mapbox-gl-js/example/
* https://docs.mapbox.com/mapbox-gl-js/example/set-config-property/
* */

const state = reactive({
  drawArea: 0
})
onMounted(() => {
  mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94ZGV2dXNlcjUyMCIsImEiOiJjbHFrb2w3M2IyNHB2MnFtZWx1ZzFjNHZmIn0.CMoLsalSeXlJiLBNyUK1nA'
  // init map
  map = new mapboxgl.Map({
    container: 'map', // 地图容器id,
    style: 'mapbox://styles/mapbox/streets-v11', // 地图样式
    center: [-91.874, 42.76], // 地图初始中心【经纬度】 starting position
    zoom: 12, // 地图初始缩放界别41 // starting zoom
    projection: 'globe', // 地图投影 为3D地球
    pitch: 62, // 相对于地面3D视角的角度 // starting pitch
    bearing: -20, // 东西南北 方向 正北方为0 // starting bearing
    antialias: false, // 抗锯齿，通过false关闭提升性能
    essential: true,
    renderWorldCopies: false, //可理解为loop，在projection: 'globe'时无效
    skipOnboarding: true,//可选择不等待瓦片加载
  })

  // Mapbox GL JS中的图层是异步的，通过使用事件绑定在合适的时间更改地图
  // POI 信息点
  //
  map.on('style.load', () => {
    initControls();
    // initSourceAndLayers();
  })

})


const initControls = () => {
  map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }));
  map.addControl(new mapboxgl.GeolocateControl())
  map.addControl(new mapboxgl.FullscreenControl())
  map.addControl(new mapboxgl.NavigationControl({visualizePitch: true}))
  map.addControl(new mapboxgl.ScaleControl())
  initDrawBox();
}
const initDrawBox = () => {
  draw = new MapboxDraw({
    // Select with mapbox-gl-draw control buttons to add to the map
    controls: {
      polygon: true,
      trash: true,
    },
    // Set mapbox-gl-draw to draw by default
    // The user does not have to click the polygon control button first.
    displayControlsDefault: false,
  })
  map.addControl(draw, 'top-left')
  map.on('draw.create', updateArea)
  map.on('draw.delete', updateArea)
  map.on('draw.update', updateArea)
}

const updateArea = (e) => {
  const data = draw.getAll();
  console.log('output-> data:: ', data)
  const answer = document.getElementById('calculated-area');
  if(data.features.length > 0) {
    const area = turf.area(data);
    // restrict the area to 2decimal points
    const rounded_area = Math.round(area * 100) / 100 / 1000000 ;
    state.drawArea = rounded_area;
  } else {
    state.drawArea = 0;
    if(e.type !== 'draw.delete') {
      alert('Click the map to draw a polygon.');
    }
  }
}

</script>


<style scoped lang="scss">
.calculation-box {
  height: 75px;
  width: 150px;
  position: absolute;
  bottom: 40px;
  left: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 15px;
  text-align: center;
}

p {
  font-family: 'Open Sans';
  margin: 0;
  font-size: 13px;
}
</style>
